<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="120px">
      <h2 style="text-align: center">转正申请</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="单据编号" prop="applyNo">
            <el-input disabled v-model="formData.applyNo" placeholder="保存后自动生成" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="员工" prop="userId">
            <!-- <UserDialog :status="0" :flag="flag"  v-model="formData.userId" @change="changeUser">
            </UserDialog> -->
            <UserDialog
            :status="null"
            :flag="1"
            :becomeShow="true"
              v-model="formData.userId"
              @change="changeUser"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <el-cascader
              filterable

              :style="{ width: '100%' }"
              @change="changeDep"
              :props="{ value: 'id' }"
              placeholder="请选择部门"
              v-model="deptId"
              :options="deptOptions"
            ></el-cascader>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="岗位" prop="userId">
            <el-select
              v-model="formData.userId"
              placeholder="请选择岗位"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in postOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

        <el-col :span="8">
          <el-form-item label="入职日期" prop="startDate">
            <el-date-picker disabled v-model="formData.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择入职日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请时间" prop="applyDate">
            <el-date-picker v-model="formData.applyDate" format="yyyy-MM-dd" disabled value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择申请时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请转正日" prop="toOfficialDate">
            <el-date-picker v-model="formData.toOfficialDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择申请转正日" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试用到期日" prop="tryEndDate">
            <el-date-picker v-model="formData.tryEndDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择试用到期日" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本备注" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <h4 class="form-header h4" v-if="($route.query.isInfo || isInfo) && formData.oss">
        附件信息
      </h4>
      <el-form-item label="" prop="oss" v-if="($route.query.isInfo || isInfo) && formData.oss">
        <FileUploadBase :isDelete="!($route.query.isInfo || isInfo)" v-model="formData.oss"></FileUploadBase>
      </el-form-item>

      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";
import {
  officialApplyAdd,
  updateOfficialApply,
  officialApplyInfo,
} from "@/api/finance/personnel/officialApply.js";
import { queryByLoginId } from "@/api/finance/personnel/contract.js";

import { userSelect, deptTreeSelect } from "@/api/system/user.js";
import { optionselectPost } from "@/api/system/post.js";

export default {
  components: {
  },
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      flag: null,
      postOptions: [],
      formData: {
        applyNo: undefined,
        userId: undefined,
        // deptId: undefined,
        startDate: "",
        applyDate: null,
        toOfficialDate: "",
        tryEndDate: "",
        nickName:''
      },
      rules: {
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        applyNo: [
          {
            required: false,
            message: "请输入合同编号",
            trigger: "blur",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择员工",
            trigger: "change",
          },
        ],

        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],

        startDate: [
          {
            required: true,
            message: "请选择入职日期",
            trigger: "blur",
          },
        ],
        applyDate: [
          {
            required: true,
            message: "请选择申请时间",
            trigger: "change",
          },
        ],
        toOfficialDate: [
          {
            required: true,
            message: "请选择申请转正日",
            trigger: "change",
          },
        ],
        tryEndDate: [
          {
            required: true,
            message: "请选择试用到期日",
            trigger: "change",
          },
        ],
      },
      userList: [],
      deptId: [],
      deptOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.formData.applyDate = this.parseTime(new Date(), "{y}-{m}-{d}");
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    this.queryByLoginId();
    // this.formData.userId = store.state.user.id;
    // if (this.$route.query.userId) {
    //   this.formData.userId = this.$route.query.userId;
    // }else{

    // }
    // this.getDeptTree();
    this.optionselectPost();
    // this.userSelect();
  },
  mounted() { },
  methods: {
    changeUser(e) {
      console.log(e);
      if (!e) return
      // this.$set(this.formData, 'deptName', e.dept.deptName)
      // this.$set(this.formData, 'deptId', e.dept.deptId)
      // this.$set(this.formData, 'nickName', e.nickName)
      this.formData.deptName = e.dept && e.dept.deptName;
      this.formData.deptId = e.dept && e.dept.deptId;
      this.formData.nickName = e.nickName
      this.formData.startDate = e.join.startDate
      // this.formData.userId = e.userId
      // console.log(this.formData, '////');
      this.formData.userId = e.userDocBaseId
      this.$forceUpdate()
      // this.formData.userName = e.phonenumber
    },
    changeDep(e) {
      console.log(e);
      this.formData.deptId = e[e.length - 1];
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    userSelect() {
      userSelect().then((response) => {
        this.userList = response.data;
      });
    },
    optionselectPost() {
      optionselectPost().then((response) => {
        this.postOptions = response.data;
      });
    },
    getinfo() {
      return officialApplyInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
        }
      );
    },
    queryByLoginId() {
      queryByLoginId(this.$route.query.id || this.id).then((response) => {
        // this.formData = response.data;
        if (response.data) {
          this.formData.startDate = response.data[0].startDate;
          this.formData.tryEndDate = this.parseTime(
            new Date(response.data[0].tryEndDate).getTime() -
            24 * 60 * 60 * 1000,
            "{y}-{m}-{d}"
          );
        }
        console.log(response);
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          // query.getUserName = this.operUserIdOptions.find(
          //   (i) => i.userId === query.getUserId
          // ).nickName;
          // query.getMethodName = this.dict.type.sys_goodsget_type.find(
          //   (i) => i.value === query.getMethodValue
          // ).label;
          // query.userTypeName = this.dict.type.sys_goodsout_type.find(
          //   (i) => i.value === query.userTypeValue
          // ).label;

          if (this.formData.laborOfficialApplyId != undefined) {
            updateOfficialApply(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            officialApplyAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
      // if (this.$route.query.iszzlist) {
      //   const obj = { path: "./zzsqList" };
      //   this.$tab.closeOpenPage(obj);
      // } else {
      //   const obj = { path: "./contract" };
      //   this.$tab.closeOpenPage(obj);
      // }
    },
  },
};
</script>
